<template>
  <div class="baouyang_home">
    <van-nav-bar
      class="nav_bar"
      fixed
      :left-text="title"
      @click-left="onClickLeft"
    >
      <template #right>
        <div class="nav_right">
          <span>车辆问题都可以问我哦~</span>
          <van-image
            class="right_icon"
            :src="require('@/assets/icon/serve/kefu.png')"
            @click="goChat"
          />
        </div>
      </template>
    </van-nav-bar>
    <div v-if="!hasCar" class="no_car">
      <van-image
        class="no_car_icon"
        :src="require('@/assets/icon/serve/car.png')"
      />
      <div class="no_car_btn">添加爱车</div>
    </div>
    <div v-else class="has_car">
      <span class="has_car_name"
        >{{ carInfo.brand }}
        <!-- <van-icon name="edit" class="edit"/> -->
      </span>
      <div class="has_car_distance">
        <van-image
          class="has_car_distance_icon"
          :src="require('@/assets/icon/home/yibiaopan.png')"
        />
        <span class="distance">{{ carInfo.mileage || 0 }}</span>
        <span style="margin-right: 10px">KM</span>
        <!-- <van-icon name="edit" class="edit" /> -->
      </div>
    </div>
    <!-- <div class="step">
      <van-steps
        :active="active"
        :active-icon="require('@/assets/icon/serve/gou.png')"
      >
        <van-step>1 选择项目</van-step>
        <van-step>2 选择门店</van-step>
        <van-step>3 下单支付</van-step>
      </van-steps>
    </div> -->
    <div class="list">
      <!-- <van-image
        class="list_bg"
        :src="require('@/assets/icon/serve/car_bg.png')"
      />
      <div class="list_title">掌心安心修</div>
      <div class="list_tips">
        <van-image
          class="tips_icon"
          :src="require('@/assets/icon/serve/tips.png')"
        />
        <span>政府把关 安心服务 产品保证</span>
      </div> -->
      <div class="main">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="list.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          <!-- <baoyangItem v-for="item in list" :key="item"></baoyangItem> -->
          <!-- <van-checkbox-group v-model="result">
            <van-checkbox v-for="item in list" :key="item" :name="item">
              <template>
                <baoyangItem></baoyangItem>
              </template>
            </van-checkbox>
          </van-checkbox-group> -->
          <baoyangItem
            v-for="(v, i) in list"
            :key="i"
            :item="v"
            @click.native="goDetail(v)"
          ></baoyangItem>
        </van-list>
        <van-empty v-if="list.length == 0 && !loading" description="暂无商品" />
      </div>
    </div>
    <!-- <div class="bottom">
      <div class="btn_container">
        <div class="left">
          <van-image
            class="shop_car"
            :src="require('@/assets/icon/serve/shop_car.png')"
          />
          <div class="tips">
            <div class="text_1">预估到手</div>
            <div class="text_2">(含工时费)</div>
          </div>
          <div class="price">￥359.99</div>
        </div>
        <div v-if="storeId > -1" class="middle" @click="choiceStore">
          选择门店
        </div>
        <div class="right" :class="{ buy: storeId > -1 }" @click="onBtnClick">
          {{ storeId < 0 ? "选择门店" : "立即购买" }}
        </div>
        <div class="right buy" @click="onBtnClick">立即购买</div>
      </div>
    </div> -->
    <van-popup
      v-model="showStore"
      position="bottom"
      get-container=".baouyang_home"
    >
      <div class="main">
        <selectStore
          v-model="storeId"
          @back="back"
          @select="select"
        ></selectStore>
      </div>
    </van-popup>
  </div>
</template>

<script>
import baoyangItem from "@/components/serve/baoyangItem.vue";
import selectStore from "@/components/store/selectSore";
import { Toast } from "vant";
import { mapGetters } from "vuex";
import api from "@/api/api";
export default {
  components: { baoyangItem, selectStore },
  props: {},
  data() {
    return {
      active: 0,
      list: [],
      loading: false,
      finished: false,
      result: [],
      storeId: -1,
      showStore: false,
      hasCar: false,
      carInfo: {},
      id: "",
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  watch: {
    storeId(val) {
      this.active = 1;
    },
  },
  computed: {
    ...mapGetters(["carList", "currentCarIndex"]),
    title() {
      if (this.id == "1923192237742030850") {
        return "做保养";
      } else if (this.id == "1923197564654911489") {
        return "做钢圈";
      } else if (this.id == "1923197645038747649") {
        return "喷油漆";
      } else if (this.id == "1923197703956135937") {
        return "换电瓶";
      } else if (this.id == "1937056066775347202") {
        return "汽车美容";
      } else if (this.id == "1937056220047798274") {
        return "洗车";
      } else if (this.id == "1937056431138729985") {
        return "换轮胎";
      }
      return "";
    },
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.getList();
    },
    async getList() {
      let res = await api.getHomeGoods({
        categoryId: this.id,
        homePage: false,
        ...this.pageInfo,
      });
      this.loading = false;
      this.list = [...this.list, ...res.data].filter(
        (v) => v.id != "1952191044194463746"
      );
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
    },
    goChat() {
      this.$router.push({
        path: "/chat",
      });
    },
    choiceStore() {
      if (!this.result.length) {
        Toast.fail("请至少选择一个服务");
        return;
      }
      this.showStore = true;
    },
    onBtnClick() {
      // if (this.storeId < 0) {
      //   this.choiceStore();
      // } else {
      //   this.makeSureOrder();
      // }
      this.makeSureOrder();
    },
    makeSureOrder() {
      // this.$router.push({
      //   path: "/makeSure",
      // });
    },
    back() {
      this.showStore = false;
    },
    select() {
      this.showStore = false;
    },
    goDetail(v) {
      this.$router.push({
        path: "/serveDetail",
        query: {
          goodsId: v.id,
          type: 1,
        },
      });
    },
  },
  created() {},
  mounted() {
    this.id = this.$route.query.id;
    if (this.carList.length) {
      this.hasCar = true;
      this.carInfo = this.carList[this.currentCarIndex];
    }
  },
};
</script>
<style lang="less" scoped>
.baouyang_home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 130px 50px 150px 50px;
  background-color: #fff;
  position: relative;
  .nav_bar {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
      no-repeat;
    background-size: cover;
    background-position: top center;
    .nav_right {
      display: flex;
      align-items: center;
      font-size: 44px;
      color: #fff;
      .right_icon {
        width: 92px;
        height: 80px;
        margin-left: 20px;
      }
    }
    /deep/.van-nav-bar__text {
      color: #fff;
      margin-left: 20px;
      font-size: 52px;
    }
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #fff;
    }
  }
  /deep/ .van-hairline--bottom::after {
    border: unset;
  }

  .no_car,
  .has_car {
    margin-top: 55px;
    padding: 10px;
    background: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_icon {
      width: 85px;
      height: 85px;
    }
    &_btn {
      padding: 15px 50px;
      border-radius: 999px;
      font-size: 44px;
      color: #fff;
      text-align: center;
      background: linear-gradient(to right, #0160ea, #01bffa);
    }
    .has_car_name {
      font-size: 44px;
      color: #333;
      display: flex;
      align-items: center;
      .edit {
        font-size: 55px;
        color: #999;
      }
    }
    .has_car_distance {
      display: flex;
      align-items: center;
      font-size: 44px;
      color: #333;
      &_icon {
        width: 54px;
        height: 42px;
        margin-right: 15px;
      }
    }
  }
  .has_car {
    padding: 10px 30px;
  }

  .step {
    margin-top: 20px;
    /deep/ .van-steps {
      background: rgba(255, 255, 255, 0.3);
      .van-step--horizontal .van-step__circle-container {
        background: transparent;
        .van-step__circle {
          width: 45px;
          height: 45px;
          background: #f9a02e;
        }
        .van-step__icon {
          font-size: 60px;
        }
        .van-step__icon--active {
          color: #f9a02e;
        }
      }
      .van-step__line {
        background-color: #f9a02e;
      }
      .van-step__title {
        color: #fff;
      }
      .van-step__title--active {
        color: #fff;
        font-weight: bold;
      }
    }
  }
  .list {
    margin-top: 35px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    // background: #eef3ff;
    padding: 60px 30px;
    position: relative;
    overflow: hidden;
    .list_bg {
      position: absolute;
      top: 20px;
      right: -70px;
      width: 332px;
      height: 152px;
    }
    .list_title {
      font-size: 56px;
      color: #3a5899;
    }
    .list_tips {
      display: flex;
      align-items: center;
      font-size: 34px;
      color: #333333;
      .tips_icon {
        width: 55px;
        height: 61px;
        margin-right: 20px;
      }
    }
    .main {
      width: 100%;
      margin-top: 20px;
      /deep/ .van-checkbox__label {
        line-height: unset;
      }
    }
  }
  .bottom {
    position: fixed;
    padding: 25px 50px 100px 50px;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    .btn_container {
      width: 100%;
      display: flex;
      align-items: center;
      height: 145px;
      .left {
        flex-grow: 1;
        background: #538afe;
        height: 100%;
        border-top-left-radius: 999px;
        border-bottom-left-radius: 999px;
        display: flex;
        align-items: flex-start;
        padding: 20px 10px 20px 50px;
        box-sizing: border-box;
        .shop_car {
          width: 92px;
          height: 84px;
          margin-right: 10px;
        }
        .tips {
          font-size: 36px;
          color: #fff;
          text-align: center;
        }
        .price {
          margin-left: 10px;
          font-size: 48px;
          color: #ffd669;
        }
      }
      .middle {
        flex: 2;
        min-width: 70px;
        background: #3f4f7c;
        line-height: 145px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        font-size: 54px;
        padding: 0 10px;
      }
      .right {
        flex: 2;
        background: #3f4f7c;
        height: 100%;
        color: #fff;
        font-size: 54px;
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
        line-height: 145px;
        text-align: center;
        font-weight: bold;
      }
      .buy {
        min-width: 120px;
        background: linear-gradient(to right, #ff5f34, #ee0c26);
      }
    }
  }
}
</style>
